<template>
    <div> <!-- Root element for the component -->
        <header>
            <div class="container nav-container">
                <a href="/" id="logo-link">
                    <img src="../assets/images/login/deecp-logo_2.svg" style="width: 150px;height:80px" alt="Deecp Logo" class="logo-svg">
                </a>
                <div style="flex-grow: 1;"></div>
                <nav class="nav-links">
                    <a href="javascript:;" @click='scrollToSection("features")'>核心功能</a>
                    <a href="javascript:;" @click='scrollToSection("pricing")'>会员计划</a>
                    <a href="javascript:;" @click='scrollToSection("courses-teaser")'>大师课程</a>
                </nav>
            <div class="nav-auth-buttons" v-if="!userinfo || !userinfo.userName">
                <a href="javascript:;" class="btn btn-secondary" @click="login" style="margin-right: 10px;">登录</a>
                <a href="javascript:;" class="btn btn-primary btn-register" @click="register">立即注册</a> 
            </div>
            <div v-else class="flex" style="flex-direction: row; justify-content: center;align-items: center;">
              <div>
                <Avatar v-if="userinfo&&userinfo.avatar" :src="'js'+userinfo.avatar" :size="32" />
                <Avatar v-else src="/js/userfiles/avatar/deecplogo.svg" :size="32" />
            </div>
                <a-dropdown>
                  <a class="ant-dropdown-link" @click.prevent>
                    <span style="display:inline-block;padding:0 12px;color: #666;">{{userinfo&&userinfo.userName}}</span>
                    <DownOutlined style='color: #666;'/>
                  </a>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <a href="javascript:;" @click='gotoIndex'>选股平台</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a href="javascript:;" @click='logout'>退出登录</a>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
            </div>
            </div>
        </header>

        <main>
            <section id="hero">
                <div class="container">
                    <h1 data-aos="fade-up" data-aos-duration="800" style="color: #ffffff;">
                        不再与机会擦肩而过！<br class="hidden md:block"><span class="gradient-text">AI</span>赋能的<span class="gradient-text">选股与交易体系构建</span>引擎
                    </h1>
                    <p class="sub-headline" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
                        独家市场<span @click="stop">洞察</span>、精细化选股工具、交易大师课程、AI智能分析
                    </p>
                    <p class="sub-headline" data-aos="fade-up" data-aos-delay="300" data-aos-duration="800" style="margin-top: -0.5rem;">
                        助您高效锁定潜力股，构建稳健交易系统
                    </p>
                    <div class="cta-buttons" data-aos="fade-up" data-aos-delay="400" data-aos-duration="800">
                        <a href="javascript:;" @click='scrollToSection("pricing")' class="btn btn-primary" style="padding: 1rem 2rem; font-size: 1.1em;">选择会员计划</a>
                    </div>
                    <div class="stats" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 4rem;" data-aos="fade-up" data-aos-delay="600">
                        <div class="stat-item floating card" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); color: white;">
                            <div class="stat-number gradient-text">100+</div><div>专业指标</div>
                        </div>
                        <div class="stat-item floating card" style="animation-delay: 0.3s; background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); color: white;">
                            <div class="stat-number gradient-text">10K+</div><div>数据点更新/日</div>
                        </div>
                        <div class="stat-item floating card" style="animation-delay: 0.6s; background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); color: white;">
                            <div class="stat-number gradient-text">10+</div><div>大师课程</div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="problem-promise" class="bg-white">
                <div class="container">
                    <h2 class="section-title" data-aos="fade-up">您是否也曾面临这些<span class="gradient-text">选股困境</span>？</h2>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; text-align: center; margin: 30px 0;">
                        <div class="card" data-aos="fade-up" data-aos-delay="100">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#e74c3c" style="width:50px; height:50px; margin:0 auto 1rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
                            </svg>
                            <h4>错失良机</h4>
                            <p class="text-sm text-gray-600">牛股启动前夕，模式符合却无暇复盘筛选？</p>
                        </div>
                        <div class="card" data-aos="fade-up" data-aos-delay="200">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#3498db" style="width:50px; height:50px; margin:0 auto 1rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
                            </svg>
                            <h4>信息过载</h4>
                            <p class="text-sm text-gray-600">海量资讯难辨真伪，缺乏系统化分析工具？</p>
                        </div>
                        <div class="card" data-aos="fade-up" data-aos-delay="300">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#27ae60" style="width:50px; height:50px; margin:0 auto 1rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
                            </svg>
                            <h4>体系缺失</h4>
                            <p class="text-sm text-gray-600">交易方法不成体系，追涨杀跌，心态不稳？</p>
                        </div>
                        <div class="card" data-aos="fade-up" data-aos-delay="400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#f39c12" style="width:50px; height:50px; margin:0 auto 1rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <h4>效率低下</h4>
                            <p class="text-sm text-gray-600">手动复盘耗时耗力，选股效率亟待提升？</p>
                        </div>
                    </div>
                </div>
            </section>

            <section id="features" ref="featuresSectionRef" style="background-color: #f0f4f8; scroll-margin-top: 80px;">
                <div class="container">
                    <h2 class="section-title" data-aos="fade-up"><span class="gradient-text">释放数据的力量，把握市场先机</span></h2>

                    <div id="features-info" class="feature-item card image-right-desktop" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: center; margin-bottom:3rem;" data-aos="fade-up">
                        <div>
                            <h3 class="gradient-text" style="font-size:1.8rem;">资讯中心 - 洞悉市场脉搏</h3>
                            <p class="text-gray-700"><strong>免费获取</strong>每日市场概况：十大股票形态、主流板块、Deecp精选50股、板块分布，独家Deecp中期信号曲线助您判断市场健康度</p>
                            <p class="text-gray-700 mt-2">学习全球顶尖交易大师课程，不断更新</p>
                            <div style="margin-top:1.5rem;">
                                <a href="#" class="btn btn-primary">免费查看市场概况</a>
                                <a href="javascript:;" @click='scrollToSection("courses-teaser")' class="btn btn-secondary" style="margin-left:10px;">浏览大师课程</a>
                            </div>
                        </div>
                        <div class="feature-image-container">
                            <img v-if="infoImageCurrentIndex==0" src="../assets/images/login/市场概况.jpg" :alt="'资讯中心截图 ' + (infoImageCurrentIndex + 1)" class="feature-display-image">
                            <img v-if="infoImageCurrentIndex==1" src="../assets/images/login/资讯课程.jpg" :alt="'资讯中心截图 ' + (infoImageCurrentIndex + 1)" class="feature-display-image">
                            <button class="arrow-btn left" @click="switchFeatureImage('info', -1)">❮</button>
                            <button class="arrow-btn right" @click="switchFeatureImage('info', 1)">❯</button>
                            <div class="image-switcher">
                                <button v-for="(img, index) in featureImages.info" :key="index"
                                        @click="setFeatureImage('info', index)"
                                        :class="{ active: infoImageCurrentIndex === index }"></button>
                            </div>
                        </div>
                    </div>

                    <div id="features-selector" class="feature-item card image-left-desktop" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: center; margin-bottom:3rem;" data-aos="fade-up" data-aos-delay="100">
                        <div class="feature-image-container">
                            <img v-if="selectorImageCurrentIndex==0" src="../assets/images/login/智能选股1.jpg" :alt="'选股器截图 ' + (selectorImageCurrentIndex + 1)" class="feature-display-image">
                            <img v-if="selectorImageCurrentIndex==1" src="../assets/images/login/智能选股2.jpg" :alt="'选股器截图 ' + (selectorImageCurrentIndex + 1)" class="feature-display-image">
                            <img v-if="selectorImageCurrentIndex==2" src="../assets/images/login/智能选股3.jpg" :alt="'选股器截图 ' + (selectorImageCurrentIndex + 1)" class="feature-display-image">
                            <img v-if="selectorImageCurrentIndex==3" src="../assets/images/login/智能选股4.jpg" :alt="'选股器截图 ' + (selectorImageCurrentIndex + 1)" class="feature-display-image">
                            
                            <button class="arrow-btn left" @click="switchFeatureImage('selector', -1)">❮</button>
                            <button class="arrow-btn right" @click="switchFeatureImage('selector', 1)">❯</button>
                            <div class="image-switcher">
                                <button v-for="(img, index) in featureImages.selector" :key="index"
                                        @click="setFeatureImage('selector', index)"
                                        :class="{ active: selectorImageCurrentIndex === index }"></button>
                            </div>
                        </div>
                        <div>
                            <h3 class="gradient-text" style="font-size:1.8rem;">智能选股 & 定制自选</h3>
                            <p class="text-gray-700">海量指标自由组合，"与/或"逻辑轻松实现复杂筛选。自定义指标权重，打造个性化自选股评分体系。专业K线图与多维度数据，深入分析个股</p>
                            <a href="javascript:;" @click='scrollToSection("pricing")' class="btn btn-primary" style="margin-top:1.5rem;">了解会员解锁全部</a>
                        </div>
                    </div>

                    <div id="features-backtest" class="feature-item card image-right-desktop" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: center; margin-bottom:3rem;" data-aos="fade-up" data-aos-delay="200">
                        <div>
                            <h3 class="gradient-text" style="font-size:1.8rem;">历史复盘 - 验证优化策略</h3>
                            <p class="text-gray-700">轻松回溯任意时间段的股票与板块表现，复盘历史走势，验证和优化您的交易策略，避免未来犯同样的错误</p>
                            <a href="javascript:;" @click='scrollToSection("pricing")' class="btn btn-primary" style="margin-top:1.5rem;">了解会员解锁全部</a>
                        </div>
                        <div class="feature-image-container">
                            <img src="../assets/images/login/历史复盘.jpg" alt="历史复盘截图" class="feature-display-image">
                        </div>
                    </div>

                    <div id="features-ai" class="feature-item card image-left-desktop" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: center;" data-aos="fade-up" data-aos-delay="300">
                        <div class="feature-image-container">
                            <img src="../assets/images/login/智能体.jpg" alt="AI智能体截图" class="feature-display-image">
                        </div>
                        <div>
                            <h3 class="gradient-text" style="font-size:1.8rem;">AI智能体 - 私人投研助理</h3>
                            <p class="text-gray-700">内置AI大模型智能体，随时解答您的课程疑问，辅助进行股票深度分析，让学习和研究事半功倍</p>
                            <a href="javascript:;" @click='scrollToSection("pricing")' class="btn btn-primary" style="margin-top:1.5rem;">了解会员解锁全部</a>
                        </div>
                    </div>
                </div>
            </section>

            <section id="why-deecp" class="bg-white">
                <div class="container">
                    <h2 class="section-title" data-aos="fade-up">为什么选择 <span class="gradient-text">Deecp</span>？</h2>
                    <div class="why-deecp-grid">
                        <div class="card text-center" data-aos="zoom-in-up" data-aos-delay="100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" stroke-width="1.5" stroke="#e74c3c" fill="none" stroke-linecap="round" stroke-linejoin="round" style="margin:0 auto 1rem;">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7" />
                                <path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" />
                                <path d="M9.7 17l4.6 0" />
                            </svg>
                            <h4 class="font-semibold text-lg mb-1">不错过机会</h4>
                            <p class="text-sm text-gray-600">"Deecp每日精选"与"信号曲线"，助您提前捕捉市场良机</p>
                        </div>
                        <div class="card text-center" data-aos="zoom-in-up" data-aos-delay="200">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#3498db" style="width:50px; height:50px; margin:0 auto 1rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
                            </svg>
                            <h4 class="font-semibold text-lg mb-1">个性化定制</h4>
                            <p class="text-sm text-gray-600">从选股到自选股评分，全面支持您的个性化交易体系</p>
                        </div>
                        <div class="card text-center" data-aos="zoom-in-up" data-aos-delay="300">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#27ae60" style="width:50px; height:50px; margin:0 auto 1rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
                            </svg>
                            <h4 class="font-semibold text-lg mb-1">极致高效率</h4>
                            <p class="text-sm text-gray-600">强大筛选与复盘工具，大幅提升研究与决策效率</p>
                        </div>
                        <div class="card text-center" data-aos="zoom-in-up" data-aos-delay="400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#f39c12" style="width:50px; height:50px; margin:0 auto 1rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" />
                            </svg>
                            <h4 class="font-semibold text-lg mb-1">大师智囊团</h4>
                            <p class="text-sm text-gray-600">系统化大师课程与AI辅助，加速您的专业成长</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Pricing Section Template - Uses planDetails computed property -->
            <section id="pricing" ref="pricingSectionRef" style="background-color: #f0f4f8; scroll-margin-top: 80px;">
                <div class="container">
                    <h2 class="section-title" data-aos="fade-up">选择适合您的 <span class="gradient-text">Deecp会员方案</span></h2>
                    <div class="pricing-table">
                        <div v-for="processedPlan in planDetails" :key="processedPlan.key"
                                class="pricing-plan card"
                                :class="{ selected: processedPlan.isSelected }" 
                                :data-plan="processedPlan.key"
                                :data-aos="processedPlan.aos" 
                                :data-aos-delay="processedPlan.aosDelay"
                                @click="selectPlan(processedPlan.key)">
                            <div>
                                <h3>{{ processedPlan.name }}</h3>
                                <div class="price" :style="{ color: processedPlan.priceColor || (processedPlan.key === 'free' ? '#7f8c8d' : '') }">
                                    <span v-if="processedPlan.key=='free'">￥0</span>
                                    <span v-if="processedPlan.key=='weekly'">￥{{weekPrice}}</span>
                                    <span v-if="processedPlan.key=='monthly'">￥{{monthPrice}}</span>
                                    <span v-if="processedPlan.key=='annual'">￥{{yearPrice}}</span>
                                    <span v-if="processedPlan.period" style="font-size: 1rem; color: #555;">/{{ processedPlan.period }}</span>
                                </div>
                                <p v-if="processedPlan.discountText" style="color: #27ae60; font-weight: bold;" v-html="processedPlan.discountText"></p>
                                <ul>
                                    <li v-for="(feature, idx) in processedPlan.features" :key="idx" v-html="feature"></li>
                                </ul>
                            </div>
                            <a href="#"
                                :class="processedPlan.currentButtonClasses"
                                :style="processedPlan.currentButtonStyle"
                                @click.prevent="selectPlan(processedPlan.key)">
                                {{ processedPlan.currentButtonText }}
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <section id="courses-teaser" ref="coursesTeacherSectionRef" class="bg-white" style="scroll-margin-top: 80px;">
                <div class="container">
                    <h2 class="section-title" data-aos="fade-up">跟随交易大师，<span class="gradient-text">系统学习实战智慧</span></h2>
                    <p class="text-center text-gray-600" style="max-width:700px; margin: -2rem auto 2.5rem auto;" data-aos="fade-up" data-aos-delay="100">
                        我们精选并翻译制作了多位国际知名交易大师的经典课程，如Mark Minervini, Oliver Kell, Al Brooks, Van Tharp等，助您构建坚实的交易理论基础和实战技能。课程内容持续更新中！
                    </p>
                    <div class="courses-scroller-container">
                        <div class="courses-scroller">
                            <div class="card" @click="gotoKecheng" v-for="(course, index) in courses" :key="'orig-' + index">
                                <img v-if="index==0" src="../assets/images/login/Mark-minervini.png" :alt="course.title" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                                <img v-else-if="index==1" src="../assets/images/login/oliver-kell.jpg" :alt="course.title" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                                <img v-else-if="index==2" src="../assets/images/login/AI-Brooks.jpg" :alt="course.title" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                                <img v-else :src="course.image" :alt="course.title" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                                <div style="padding:1rem;">
                                    <h4 class="font-semibold text-lg">{{ course.title }}</h4>
                                    <p class="text-sm text-gray-500">{{ course.description }}</p>
                                    <a :href="course.link" class="btn btn-secondary"
                                        :class="{ disabled: course.disabled }"
                                        :style="{ fontSize: '0.9rem', padding: '0.5rem 1rem', marginTop: '1rem', opacity: course.disabled ? 0.5 : 1, cursor: course.disabled ? 'not-allowed' : 'pointer' }">
                                        {{ course.buttonText }}
                                    </a>
                                </div>
                            </div>
                            <div class="card" @click="gotoKecheng" v-for="(course, index) in courses" :key="'copy-' + index">
                                <img v-if="index==0" src="../assets/images/login/Mark-minervini.png" :alt="course.title" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                                <img v-else-if="index==1" src="../assets/images/login/oliver-kell.jpg" :alt="course.title" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                                <img v-else-if="index==2" src="../assets/images/login/AI-Brooks.jpg" :alt="course.title" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">
                                <img v-else :src="course.image" :alt="course.title" style="width:100%; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; object-fit: cover;">

                                <div style="padding:1rem;">
                                    <h4 class="font-semibold text-lg">{{ course.title }}</h4>
                                    <p class="text-sm text-gray-500">{{ course.description }}</p>
                                    <a :href="course.link" class="btn btn-secondary"
                                        :class="{ disabled: course.disabled }"
                                        :style="{ fontSize: '0.9rem', padding: '0.5rem 1rem', marginTop: '1rem', opacity: course.disabled ? 0.5 : 1, cursor: course.disabled ? 'not-allowed' : 'pointer' }">
                                        {{ course.buttonText }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="referral" style="background-color: #e7f5ff;">
                <div class="container text-center card" style="max-width:700px; background: linear-gradient(135deg, #e0f2fe, #f0e6ff);" data-aos="fade-up">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" stroke-width="1.5" stroke="#e74c3c" fill="none" stroke-linecap="round" stroke-linejoin="round" style="margin:0 auto 1rem;">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M3 8m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z" />
                        <path d="M12 8l0 13" />
                        <path d="M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7" />
                        <path d="M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5" />
                    </svg>
                    <h2 class="gradient-text" style="font-size: 2rem; margin-bottom: 1rem;">邀请好友，同享福利！</h2>
                    <p class="text-gray-700">成功邀请好友注册并消费，您和好友均可获得前三笔消费金额<strong style="color: #e74c3c;">10%的返佣奖励</strong>！多邀多得！</p>
                    <p class="text-gray-700">更有购买课程<strong style="color: #e74c3c;">送会员</strong>！</p>
                </div>
            </section>

            <!-- <section id="testimonials" class="bg-white">
                <div class="container">
                    <h2 class="section-title" data-aos="fade-up">听听 <span class="gradient-text">Deecp用户</span> 怎么说</h2>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 20px;">
                        <div v-for="testimonial in testimonials" :key="testimonial.author"
                                class="testimonial card" :style="{ borderLeft: '4px solid ' + testimonial.borderColor }"
                                data-aos="fade-up" :data-aos-delay="testimonial.aosDelay">
                            <p class="testimonial-text text-gray-700" style="font-style: italic; margin-bottom: 1rem; font-size: 1.05rem;">
                                "{{ testimonial.text }}"
                            </p>
                            <p class="testimonial-author" :style="{ fontWeight: 'bold', color: testimonial.borderColor }">
                                <strong>- {{ testimonial.author }}</strong>
                            </p>
                        </div>
                    </div>
                </div>
            </section> -->

            <section id="final-cta" style="background: linear-gradient(135deg, #e74c3c 0%, #3498db 50%, #27ae60 100%); color: white; text-align: center;">
                <div class="container">
                    <h2 style="font-size: 2.2rem; margin-bottom: 1rem;color:white;" data-aos="fade-up">准备好提升您的选股能力，<br>构建专属交易体系了吗？</h2>
                    <p style="font-size: 1.1rem; margin-bottom: 2rem; opacity: 0.9;" data-aos="fade-up" data-aos-delay="100">
                        加入Deecp，用数据和智慧武装您的投资<span style="cursor: pointer;" @click="stop">决策</span>！
                    </p>
                    <a href="javascript:;" @click='scrollToSection("pricing")' class="btn btn-primary" style="padding: 1rem 2.5rem; font-size: 1.2em; background: white; color: #3498db; border: 2px solid white;" data-aos="zoom-in" data-aos-delay="200">
                        立即加入Deecp，开启智能交易之旅！
                    </a>
                </div>
            </section>
        </main>

        <footer style="background-color: #2c3e50; color: #bdc3c7; padding: 2rem 0;">
            <div class="container">
                <div class="footer-content-wrapper" style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px;">
                    <div class="footer-left" style="flex-basis: 55%; min-width: 300px;">
                        <p style="font-size:0.9rem; margin-top: 0; margin-bottom: 0.5rem;">
                            © {{ currentYear }} Deecp. All Rights Reserved.
                        </p>
                        <p style="font-size:0.8rem; margin-bottom:0; opacity:0.7; line-height: 1.5;" @click="stop">
                            投资有风险，入市需谨慎。本平台提供工具及<span @click="stop" style="cursor: pointer;">资讯</span>，不构成任何投资建议。
                        </p>
                    </div>
                    <div class="footer-right" style="flex-basis: 40%; min-width: 300px; display: flex; align-items: flex-start; gap: 15px;">
                        <div class="beian-column" style="flex-grow: 1; min-width: 180px;">
                            <p style="font-size: 0.8rem; line-height: 1.7; margin:0 0 0.5rem 0; text-align: left;">
                                <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" style="color: #ecf0f1; text-decoration: none; white-space: nowrap;">苏ICP备2024144409号-1</a>
                            </p>
                            <!-- <p style="font-size: 0.8rem; line-height: 1.7; margin:0; text-align: left;">
                                <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=XXXXXXXXXXXXXXXXXX" target="_blank" rel="noopener noreferrer" style="color: #ecf0f1; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap;">
                                    <img src="https://placehold.co/16x16/bdc3c7/2c3e50?text=徽" alt="公安备案图标" style="margin-right: 4px; border-radius:2px; vertical-align: middle;">苏公网安备 XXXXXXXXXXXXXXXXXX号
                                </a>
                            </p> -->
                        </div>
                        <div class="qrcode-column" style="min-width: 90px; text-align: center;">
                            <img src="../assets/images/login/qrcode.png" alt="Deecp微信公众号二维码" style="width: 90px; height: 90px; display: block; margin: 0 auto 0.3rem auto; border-radius: 4px; border: 1px solid #4a6a82;">
                            <p style="font-size:0.8rem; color: #ecf0f1; margin:0; line-height: 1.2;">扫码关注Deecp公众号</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>

<style lang='less' scoped>
.container {
    --color-primary-start: #e74c3c;
    --color-primary-mid: #3498db;
    --color-primary-end: #27ae60;
    --gradient-primary: linear-gradient(135deg, #e74c3c 0%, #3498db 50%, #27ae60 100%);
    --gradient-button: linear-gradient(135deg, #e74c3c, #3498db);
    --color-hero-bg-start: #2c3e50;
    /* Hero区域背景色 */
    --color-hero-bg-end: #34495e;
    /* Hero区域背景色 */
    --nav-link-color: #555;
    --nav-link-hover-color: #3498db;
}
section {
    padding: 60px 0 !important;
}
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f8f9fa;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

section {
    padding: 60px 0;
}

h1,
h2,
h3 {
    margin-top: 0;
    font-weight: 700;
}

.gradient-text {
    background: linear-gradient(135deg, #e74c3c 0%, #3498db 50%, #27ae60 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: linear-gradient(135deg, #e74c3c, #3498db);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
}

.btn-secondary {
    background: transparent;
    color: #e74c3c;
    border: 2px solid #e74c3c;
}

.btn-secondary:hover {
    background: #e74c3c;
    color: white;
}
.btn.disabled, .btn:disabled { /* Ensure disabled style applies */
    opacity:0.5 !important;
    cursor:not-allowed !important;
    background: #ccc !important;
    color: #666 !important;
    border-color: #ccc !important;
    box-shadow: none !important;
    transform: none !important;
}


.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-svg {
    width: 120px;
    height: auto;
}

.nav-links {
    display: flex;
    gap: 25px;
    font-weight: 500;
    margin-right: 2rem;
}

.nav-links a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 1.1em;
}

.nav-links a:hover {
    color: #3498db;
}

.nav-auth-buttons {
    display: flex;
    align-items: center;
}


#hero {
    position: relative;
    color: white;
    padding: 100px 0 80px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

#hero h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 800;
}

#hero .sub-headline {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #e0e0e0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.feature-image-container {
    position: relative;
    background-color: #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin-bottom: 1rem; /* Default for mobile */
}
@media (min-width: 768px) { /* Only add bottom margin if it's not the last item in a row */
        .feature-item > *:not(:last-child) > .feature-image-container {
            margin-bottom: 0; /* Reset for grid layout */
        }
}


.feature-display-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}

.arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
    cursor: pointer;
}

.feature-image-container:hover .arrow-btn {
    opacity: 1;
}

.arrow-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.arrow-btn.left {
    left: 0.5rem;
}

.arrow-btn.right {
    right: 0.5rem;
}

.image-switcher {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.image-switcher button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.image-switcher button.active {
    background-color: #3498db;
    transform: scale(1.2);
}

.pricing-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5rem;
    margin-top: 30px;
}

.pricing-plan {
    text-align: center;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pricing-plan.selected {
    border: 2px solid #e74c3c;
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.2);
    position: relative;
}

.pricing-plan.selected[data-plan="monthly"]::before { /* Apply to selected monthly plan */
    content: '推荐';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #e74c3c;
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}


.pricing-plan.card {
    padding: 1.25rem;
}

.pricing-plan .price {
    font-size: 2.2rem;
    margin: 0.75rem 0;
}

.pricing-plan ul {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    text-align: left;
    padding-left: 1rem;
    min-height: 60px;
}

.pricing-plan li {
    padding: 0.35rem 0;
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.85rem;
    color: #555;
}

.pricing-plan li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #27ae60;
    font-weight: bold;
}

.pricing-plan .btn {
    margin-top: auto;
}

.pricing-plan p[style*="color: #27ae60"] {
    margin: -0.35rem 0 0.65rem !important;
}


.why-deecp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 30px;
}

.courses-scroller-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.courses-scroller {
    display: flex;
    padding-bottom: 1.5rem;
    gap: 2rem;
    width: calc((280px + 2rem) * 10);
    animation: scrollCourses 60s linear infinite;
}

.courses-scroller-container:hover .courses-scroller {
    animation-play-state: paused;
}

@keyframes scrollCourses {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * ( (280px + 2rem) * 5)));
    }
}

.courses-scroller .card {
    min-width: 280px;
    flex-shrink: 0;
}


.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.floating {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.stat-item {
    padding: 1.5rem;
    text-align: center;
}

.stat-item div:last-child {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Responsive ordering for feature items */
/* Default: Text left, Image Right (or Image top, Text bottom on mobile) */
.feature-item.image-left-desktop .feature-image-container { order: 1; }
.feature-item.image-left-desktop div:not(.feature-image-container) { order: 2; }

.feature-item.image-right-desktop .feature-image-container { order: 2; }
.feature-item.image-right-desktop div:not(.feature-image-container) { order: 1; }


@media (max-width: 767px) {
    .feature-item .feature-image-container,
    .feature-item div:not(.feature-image-container) {
        order: initial !important; /* Reset desktop order for natural flow or specific mobile order */
    }
    /* On mobile, image always first, then text for all feature items */
        .feature-item > .feature-image-container { order: 1; margin-bottom: 1rem;}
        .feature-item > div:not(.feature-image-container) { order: 2; }
}
    </style>

<script lang='ts'>
  import { Avatar,Dropdown, Menu, MenuItem } from 'ant-design-vue';
  import { DownOutlined } from '@ant-design/icons-vue';
import { func } from 'vue-types';
  export default {
    components: {
        AAvatar: Avatar,
        ADropdown: Dropdown,
        AMenu: Menu,
        AMenuItem: MenuItem
      }
    };
</script>

<script lang='ts' setup>
    import { computed, defineComponent, ref, unref, CSSProperties, h ,onMounted, nextTick } from 'vue';
    import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './sys/login/useLogin';
    import { useUserStore } from '/@/store/modules/user';
    import AOS from 'aos';
    import { useRouter } from 'vue-router';
    import { getVipList, stopSysetm } from '/@/api/main/index';
    import { userInfoApi } from '/@/api/sys/login';

    const router = useRouter();
    const userStore = useUserStore();
    
    onMounted(async() => {

        try{
            let vipinfo = await getVipList();
            viplist.value = vipinfo.list;
            if(viplist.value && viplist.value.length>0) {
                weekPrice.value = viplist.value[0].price;
                monthPrice.value = viplist.value[1].price;
                yearPrice.value = viplist.value[2].price;
            }
            const res = await userInfoApi('none');
            if(res['result']=='true') {
                userinfo.value = res.user;
            };
        }catch(e){
            console.log(e)
        }
    });

  const userinfo = ref();   
  const viplist = ref();

  const weekPrice = ref(0);
  const monthPrice = ref(0);
  const yearPrice = ref(0);

  const getUserHeaderImage = computed(()=>{
    if(userinfo.value&&userinfo.value.avatar){
      return 'js'+userinfo.value.avatar
    }
    return '../assets/icons/deecp_icon.svg'
  });

 function login() {
    router.push({
      'name': "Login",
      "query": {
        'state': LoginStateEnum.LOGIN
      }
    });
  }

  function stop(){
    stopSysetm({})
  }

  function register(){
    router.push({
      'name': "Login",
      "query": {
        'state': LoginStateEnum.REGISTER
      }
    });
  }

  function gotoIndex(){
    window.open("/dp/xinwen/zixun");
  }
  function logout(){
    userStore.confirmLoginOut();
  }
  function gotoVipBuy(vipType) {
    window.open('/desktop/dpperson?vipType='+vipType);
  }
  function gotoKecheng(){
      window.open("/dp/xinwen/zixun?activeKey=2");
  }

    // --- Footer Current Year ---
    const currentYear = computed(() => new Date().getFullYear());

    // --- Feature Image Switcher Logic ---
    const featureImages = {
        info: ['../assets/images/login/市场概况.jpg', '../assets/images/login/资讯课程.jpg'],
        selector: ['../assets/images/login/智能选股1.jpg', '../assets/images/login/智能选股2.jpg', 
            '../assets/images/login/智能选股3.jpg', '../assets/images/login/智能选股4.jpg'],
    };
    
    const featuresSectionRef = ref();
    const pricingSectionRef = ref();
    const coursesTeacherSectionRef = ref();

    function scrollToSection(sectionId) {
        let element;
        if(sectionId=='features'){
            element = featuresSectionRef.value;
        } else if(sectionId=='pricing') {
            element = pricingSectionRef.value;
        } else if(sectionId=='courses-teaser') {
            element = coursesTeacherSectionRef.value;
        }
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
        }
    };

    const infoImageCurrentIndex = ref(0);
    const selectorImageCurrentIndex = ref(0);

    const currentInfoImage = computed(() => featureImages.info[infoImageCurrentIndex.value]);
    const currentSelectorImage = computed(() => featureImages.selector[selectorImageCurrentIndex.value]);

    function setFeatureImage(type, index) {
        if (type === 'info') {
            infoImageCurrentIndex.value = index;
        } else if (type === 'selector') {
            selectorImageCurrentIndex.value = index;
        }
    }

    function switchFeatureImage(type, direction) {
        let currentIndexRef;
        let imagesArray;

        if (type === 'info') {
            currentIndexRef = infoImageCurrentIndex;
            imagesArray = featureImages.info;
        } else if (type === 'selector') {
            currentIndexRef = selectorImageCurrentIndex;
            imagesArray = featureImages.selector;
        } else {
            return;
        }

        let newIndex = currentIndexRef.value + direction;
        if (newIndex < 0) {
            newIndex = imagesArray.length - 1;
        } else if (newIndex >= imagesArray.length) {
            newIndex = 0;
        }
        currentIndexRef.value = newIndex;
    }


    // --- Pricing Plan Logic ---
    const selectedPlanKey = ref('monthly'); 

    const pricingPlans = ref([
        {
            key: 'free',
            name: '免费用户',
            period: null,
            features: ['访问资讯中心'],
            buttonTextDefault: '立即注册',
            aos: 'fade-up', 
            aosDelay: '100',
        },
        {
            key: 'weekly',
            name: '周会员 (体验)',
            period: '周',
            features: ['访问所有核心功能', '短期灵活体验'],
            buttonTextDefault: '¥6 抢先体验',
            aos: 'fade-up',
            aosDelay: '200',
        },
        {
            key: 'monthly',
            name: '月度会员',
            period: '月',
            priceColor: '#e74c3c',
            features: ['访问所有核心功能', '性价比高', '按月付费，无长期承诺'],
            buttonTextDefault: '选择月度方案',
            aos: 'fade-up',
            aosDelay: '300',
            isRecommended: true, 
        },
        {
            key: 'annual',
            name: '年度会员',
            period: '年',
            discountText: '立省 ¥49 (相当于8.5折)',
            features: ['访问所有核心功能', '最划算的选择', '全年无忧使用', '<strong>优先客户支持</strong>'],
            buttonTextDefault: '选择年度方案',
            aos: 'fade-up',
            aosDelay: '400',
        }
    ]);

    function selectPlan(planKey) {

        selectedPlanKey.value = planKey;
        nextTick(() => {
            // console.log('Refreshing AOS due to plan selection change.');
            AOS.refreshHard(); // Crucial for re-evaluating AOS elements
            if(planKey=='free') {
                register()
            } else if(planKey=='weekly'){
                gotoVipBuy('week')
            } else if(planKey=='monthly'){
                gotoVipBuy('month')
            } else if(planKey=='annual'){
                gotoVipBuy('year')
            }
        });
    }

    const planDetails = computed(() => {
        return pricingPlans.value.map(plan => {
            const isSelected = selectedPlanKey.value === plan.key;
            let buttonText = isSelected ? '已选择此方案' : plan.buttonTextDefault;
            
            let buttonClasses = ['btn'];
            if (isSelected) {
                buttonClasses.push('btn-primary');
            } else {
                if (plan.key === 'free' || plan.key === 'annual') {
                    buttonClasses.push('btn-secondary');
                } else { 
                    buttonClasses.push('btn-primary');
                }
            }

            let buttonStyle = {};
            if (isSelected) {
                if (plan.key === 'monthly' && plan.isRecommended) {
                    buttonStyle.background = 'linear-gradient(135deg, #e74c3c 0%, #3498db 50%, #27ae60 100%)';
                } else {
                    buttonStyle.background = 'linear-gradient(135deg, #e74c3c, #3498db)';
                }
            } else {
                if ((plan.key === 'weekly' || plan.key === 'monthly')) {
                        buttonStyle.background = 'linear-gradient(135deg, #e74c3c, #3498db)';
                }
            }
            
            return {
                ...plan,
                isSelected,
                currentButtonText: buttonText,
                currentButtonClasses: buttonClasses.join(' '),
                currentButtonStyle: buttonStyle
            };
        });
    });


    // --- Courses Data ---
    const courses = ref([
        { image: '../assets/images/login/Mark-minervini.png', title: 'Mark Minervini 趋势交易法', description: '学习SEPA策略，捕捉超级成长股', link: '#', buttonText: '了解详情' },
        { image: '../assets/images/login/oliver-kell.jpg', title: 'Oliver Kell 短线爆发策略', description: '掌握关键K线形态和入场时机', link: '#', buttonText: '了解详情' },
        { image: '../assets/images/login/AI-Brooks.jpg', title: 'Al Brooks 价格行为交易', description: '精读市场语言，洞悉裸K奥秘', link: '#', buttonText: '了解详情' },
        { image: 'https://placehold.co/280x180/f39c12/white?text=Van+Tharp', title: 'Van Tharp 头寸管理', description: '科学管理风险，优化资金效率', link: '#', buttonText: '了解详情' },
        { image: 'https://placehold.co/280x180/9b59b6/white?text=New+Course', title: '更多大师课即将上线', description: '敬请期待更多交易智慧分享', link: '#', buttonText: '敬请期待', disabled: true }
    ]);

    // --- Testimonials Data ---
    const testimonials = ref([
        { text: "Deecp的选股器太强大了，特别是自定义指标和权重的功能，帮我精准定位到了几只好股票，选股效率大大提升！", author: "交易员 王凯", borderColor: "#e74c3c", aosDelay: "100" },
        { text: "市场概况和信号曲线让我对大盘有了更清晰的认识，Deecp50股的质量也很高。课程内容也很棒，正在学习Mark的。", author: "用户 赵女士", borderColor: "#3498db", aosDelay: "200" },
        { text: "AI助手回答课程问题很及时，还能帮我分析个股，感觉像有个私人研究员。历史复盘功能也让我对策略更有信心了。", author: "学员 东边不亮西边亮", borderColor: "#27ae60", aosDelay: "300" }
    ]);

    </script>